<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.js"></script>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2310709_9hf37riauq.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/index.js"></script>
    <script src="./libs/jquery-validation/jquery.validate.js"></script>
    <script src="./libs/layer/layer.js"></script>
</head>

<body>
    <!-- 头部菜单 -->
    <header>
        <div id="header-menu">
            <div class="header main">
                <ul>
                    <li>您好,欢迎光临凡客诚品！</li>
                    <li><a href="./login.html">登录</a></li>
                    <li>|</li>
                    <li><a href="./register.html">注册</a></li>
                    <li><a href="">我的订单</a></li>
                    <li><i class="iconfont icon-yinliang"></i> 网站公告</li>
                    <li>
                        <span class="top-qr"></span>
                        <span></span>
                        <img class="top-qr-img" src="./img/top-qr.png" alt="">
                    </li>
                </ul>
            </div>
        </div>
        <!-- 搜索框/购物车  -->
        <div id="search">
            <div class="vanksearch main">
                <div class="searchbox fr">
                    <div class="searcharea">
                        <input type="text" placeholder="搜“卫衣”，体验与众不同">
                        <span class="searchbtn">搜索</span>
                        <span class="buycar">
                            <i class="iconfont icon-gouwuche1"></i>
                            <a href="./buycar.html"">购物车</a>
                            <div class=" lists">
                                <table>
                                    <thead>
                                        <tr>
                                            <td>空空如也,不妨先去选购商品</td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                    </div>
                    <em></em>
                    </span>
                </div>
                <p class=" friendlink">
                    <span>热门搜索:</span>
                    <a href="">免烫衬衫</a>
                    <a href="">外套</a>
                    <a href="">针织衫</a>
                    <a href="">卫衣</a>
                    <a href="">休闲裤</a>
                    <a href="">帆布鞋</a>
                    <a href="">羽绒服</a>
                </p>
            </div>
        </div>
        </div>
        <!-- 菜单导航 -->
        <div id="nav">
            <div class="nav main">
                <a href="./index.html" class="logo"></a>
                <ul class="nav-list">
                    <li>首页</li>
                    <li>摇粒绒<i class="iconfont icon-hot"></i>
                        <ul>
                            <li>摇粒绒</li>
                            <li><a href="./detail.html">仿羊羔绒</a></li>
                        </ul>
                    </li>
                    <li>商务衬衫<i class="iconfont icon-hot"></i>
                        <ul>
                            <li>长袖免烫</li>
                            <li>舒适商务</li>
                            <li>高支衬衫</li>
                            <li>短袖免烫</li>
                            <li>短袖桑蚕丝</li>
                        </ul>
                    </li>
                    <li>休闲衬衫
                        <ul>
                            <li>牛津纺</li>
                            <li>法兰绒</li>
                            <li>灯芯绒</li>
                            <li>水洗棉</li>
                            <li>易打理</li>
                            <li>麻棉系列</li>
                            <li>复古风系列</li>
                            <li>女款</li>
                            <li>短袖休闲衬衫</li>
                        </ul>
                    </li>
                    <li>卫衣
                        <ul>
                            <li>时尚款</li>
                            <li>开衫</li>
                            <li>圆领</li>
                            <li>连帽</li>
                        </ul>
                    </li>
                    <li>外套<i class="iconfont icon-hot"></i>
                        <ul>
                            <li>羽绒服</li>
                            <li>大衣</li>
                            <li>夹克</li>
                            <li>西服</li>
                            <li>摇粒绒</li>
                            <li>冲锋衣</li>
                        </ul>
                    </li>
                    <li>针织衫
                        <ul>
                            <li>圆领</li>
                            <li>V领开衫</li>
                            <li>polo领</li>
                            <li>高领</li>
                            <li>开衫</li>
                        </ul>
                    </li>
                    <li>裤装
                        <ul>
                            <li>牛仔裤</li>
                            <li>休闲裤</li>
                            <li>针织裤</li>
                            <li>运动系列</li>
                            <li>沙滩裤</li>
                            <li>短裤</li>
                            <li>半裙</li>
                        </ul>
                    </li>
                    <li>鞋
                        <ul>
                            <li>帆布鞋</li>
                            <li>休闲鞋</li>
                            <li>运动鞋</li>
                            <li>凉鞋</li>
                            <li>皮鞋</li>
                            <li>靴子</li>
                            <li>女鞋</li>
                        </ul>
                    </li>
                    <li>家居配饰
                        <ul>
                            <li>袜品</li>
                            <li>内衣</li>
                            <li>家居服</li>
                            <li>连裤袜</li>
                            <li>家居鞋</li>
                            <li>床品件套</li>
                            <li>毯</li>
                            <li>被</li>
                            <li>围巾</li>
                            <li>枕</li>
                            <li>抱枕</li>
                            <li>手机壳</li>
                            <li>箱包</li>
                            <li>裙装</li>
                            <li>马甲</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <!-- 侧边滚动条 -->
    <section>
        <div id="scroll">
            <ul class="scroll-menu">
                <li class="newpepeo"><a href=""></a></li>
                <li class="downapp"><a href=""></a></li>
                <li class="online"><a href=""></a></li>
                <li class="backtop"><a></a></li>
            </ul>
        </div>
    </section>
    <!-- 轮播图 -->
    <section>
        <div id="banner">
            <div class="banner main">
                <div class="pre-nav">
                    <!-- 两侧导航 -->
                    <span class="arr-prev"></span>
                    <span class="arr-next"></span>
                </div>
                <ul>
                    <li><img src="./img/slideshow/1.jpg" alt=""></li>
                    <li><img src="./img/slideshow/2.jpg" alt=""></li>
                    <li><img src="./img/slideshow/3.jpg" alt=""></li>
                    <li><img src="./img/slideshow/4.jpg" alt=""></li>
                    <li><img src="./img/slideshow/5.jpg" alt=""></li>
                </ul>
                <div class="circle">
                    <!-- 动态生成小圆圈 -->
                </div>
            </div>
        </div>
    </section>
    <!-- 倒计时 秒杀 -->
    <section>
        <div id="recharge">
            <div class="recharge main">
                <a href=""><img src="./img/czt.jpg" alt=""></a>
            </div>
            <div class="countdown main">
                <div class="condown-top">
                    <p>限时<span>秒杀</span></p>
                    <p>距离结束还有
                        <span id="hh">00</span>
                        <span>:</span>
                        <span id="mm">00</span>
                        <span>:</span>
                        <span id="ss">00</span>
                    </p>
                    <p><a href="">查看更多></a></p>
                </div>
                <ul class="condown-buynow">
                    <li>
                        <a href="">
                            <img src="./img/buynow1.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="./img/buynow2.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="./img/buynow3.jpg" alt="">
                        </a>
                    </li>
                </ul>
                <ul class="coupon">
                    <li><a href=""><img src="./img/coupon1.jpg" alt=""></a></li>
                    <li><a href=""><img src="./img/coupon2.jpg" alt=""></a></li>
                    <li><a href=""><img src="./img/coupon3.jpg" alt=""></a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- 主体内容 -->
    <section>
        <div id="content">
            <h2>2021新年特惠</h2>
            <div class="content main">
                <ul <li><a href=""><img src="./img/cont1.jpg" alt=""></a></li>
                    <li><a href=""><img src="./img/cont2.jpg" alt=""></a></li>
                    <li><a href=""><img src="./img/cont3.jpg" alt=""></a></li>
                    <li><a href=""><img src="./img/cont4.jpg" alt=""></a></li>
                    <li><a href=""><img src="./img/cont5.jpg" alt=""></a></li>
                    <li><a href=""><img src="./img/cont6.jpg" alt=""></a></li>
                    <li><a href=""><img src="./img/cont7.jpg" alt=""></a></li>
                    <li><a href=""><img src="./img/cont8.jpg" alt=""></a></li>
                    <li><a href=""><img src="./img/cont9.jpg" alt=""></a></li>
                    <li><a href=""><img src="./img/cont10.jpg" alt=""></a></li>
                    <li><a href=""><img src="./img/cont11.jpg" alt=""></a></li>
                    <li><a href=""><img src="./img/cont12.jpg" alt=""></a></li>
                    <li><a href=""><img src="./img/cont13.jpg" alt=""></a></li>
                    <li><a href=""><img src="./img/cont14.jpg" alt=""></a></li>
                </ul>
                <h2>优选推荐</h2>
                <ul class="recommend1">
                    <li>
                        <a href="">
                            <img src="./img/recommend1.jpg" alt="">
                        </a>
                        <p>
                            <span class="fl">日式免烫长袖衬衫</span>
                            <span class="fr">冰点直降充值后<em>39</em> 元</span>
                        </p>
                    </li>
                    <li>
                        <span>
                            <a href="">
                                <img src="./img/recommend2.jpg" alt="">
                            </a>
                            <p>
                                <span class="fl">卫衣 </span>
                                <span class="fr">冰点直降充值后<em>59</em> 元</span>
                            </p>

                        </span>
                        <span>
                            <a href="">
                                <img src="./img/recommend3.jpg" alt="">
                            </a>
                            <p>
                                <span class="fl">牛津纺</span>
                                <span class="fr">冰点直降充值后<em>159</em> 元</span>
                            </p>
                        </span>
                    </li>
                    <li>
                        <a href="">
                            <img src="./img/recommend4.jpg" alt="">
                        </a>
                        <p>
                            <span class="fl">软壳风衣</span>
                            <span class="fr">冰点直降充值后<em>239</em> 元</span>
                        </p>
                    </li>
                </ul>
                <ul class="recommend2">
                    <li>
                        <a href="">
                            <img src="./img/recommend5.jpg" alt="">
                        </a>
                        <p>
                            <span class="fl">秋冬潮衣</span>
                            <span class="fr">直降充值后<em>98</em> 元</span>
                        </p>
                    </li>
                    <li>
                        <span>
                            <a href="">
                                <img src="./img/recommend6.jpg" alt="">
                            </a>
                            <p>
                                <span class="fl">休闲衬衫</span>
                                <span class="fr">冰点直降充值后<em>49</em> 元</span>
                            </p>

                        </span>
                        <span>
                            <a href="">
                                <img src="./img/recommend7.jpg" alt="">
                            </a>
                            <p>
                                <span class="fl">针织衫</span>
                                <span class="fr">冰点直降充值后<em>79</em> 元</span>
                            </p>
                        </span>
                    </li>
                    <li>
                        <a href="">
                            <img src="./img/recommend8.jpg" alt="">
                        </a>
                        <p>
                            <span class="fl">摇粒绒</span>
                            <span class="fr">冰点直降充值后<em>129</em> 元</span>
                        </p>
                    </li>
                </ul>
                <h2>夏装推荐</h2>
                <ul class="recommend3">
                    <li><a href="">
                            <img src="./img/recommend9.jpg" alt="">
                        </a>
                        <p>
                            <span class="fl">休闲裤</span>
                            <span class="fr">冰点直降充值后<em>99</em> 元</span>
                        </p>
                    </li>
                    <li><a href="">
                            <img src="./img/recommend10.jpg" alt="">
                        </a>
                        <p>
                            <span class="fl">牛仔裤</span>
                            <span class="fr">冰点直降充值后<em>79</em> 元</span>
                        </p>
                    </li>
                    <li><a href="">
                            <img src="./img/recommend11.jpg" alt="">
                        </a>
                        <p>
                            <span class="fl">针织裤</span>
                            <span class="fr">冰点直降充值后<em>89</em> 元</span>
                        </p>
                    </li>
                    <li><a href="">
                            <img src="./img/recommend12.jpg" alt="">
                        </a>
                        <p>
                            <span class="fl">帆布鞋</span>
                            <span class="fr">冰点直降充值后<em>79</em> 元</span>
                        </p>
                    </li>
                </ul>
                <h2>更多精品</h2>
                <ul class="morepic">
                    <li><a href=""><img src="./img/morepic1.jpg" alt=""></a></li>
                    <li><a href=""><img src="./img/morepic2.jpg" alt=""></a></li>
                    <li><a href=""><img src="./img/morepic3.jpg" alt=""></a></li>
                    <li><a href=""><img src="./img/morepic4.jpg" alt=""></a></li>
                    <li><a href=""><img src="./img/morepic5.jpg" alt=""></a></li>
                    <li><a href=""><img src="./img/morepic6.jpg" alt=""></a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- 底部 -->
    <footer>
        <div id="footer">
            <div class="fot-top main">
                <ul>
                    <li><a href="">
                            <p class="onlinelogo"><img src="./img/kefu.png" alt=""></p>
                            <p class="onlinekefu">7X9小时在线客服</p>
                        </a></li>
                    <li><a href="">
                            <p class="seven"><img src="./img/seven.png" alt=""></p>
                            <p>7天内退货</p>
                            <p>购物满199元免运费</p>
                        </a></li>
                    <li>
                        <p class="qr"><img src="./img/QR.jpg" alt=""></p>
                        <p>扫码下载<span>凡客</span>客户端</p>
                    </li>
                </ul>
                <ul>
                    <li><a href="">关于凡客</a></li>
                    <li><a href="">新手指南</a></li>
                    <li><a href="">配送范围及时间</a></li>
                    <li><a href="">支付方式</a></li>
                    <li><a href="">售后服务</a></li>
                    <li><a href="">帮助中心</a></li>
                </ul>
            </div>
            <div class="fot-bot main">
                <hr>
                <p>Copyright 2007 - 2020 vancl.com All Rights Reserved<a href="">京ICP备08000757号</a>京公网安备11011502002400号
                    出版物经营许可证新出发京批字第直110138号</p>
                <p>凡客诚品（北京）科技有限公司</p>
                <p class="fot-link">
                    <span class="costumeOrg"></span>
                    <a href="" class="vanclMsg"></a>
                    <a href="" class="vanclqingNian"></a>
                </p>

            </div>
        </div>
    </footer>
</body>

</html>